import React from 'react';
import { useTodo } from '../context/TodoContext';

function Navbar({ currentPage, navigationContext }) {
  const { getStats, isInitialized } = useTodo();
  const stats = isInitialized ? getStats() : { workTodos: 0, personalTodos: 0, shoppingTodos: 0 };
  
  return (
    <nav className="demo3-navbar">
      <button 
        className={`demo3-nav-item ${currentPage === 'home' ? 'active' : ''}`}
        onClick={() => navigationContext.navigate('/')}
      >
        首页
      </button>
      <button 
        className={`demo3-nav-item ${currentPage === 'work' ? 'active' : ''}`}
        onClick={() => navigationContext.navigate('/work')}
      >
        工作 ({stats.workTodos})
      </button>
      <button 
        className={`demo3-nav-item ${currentPage === 'personal' ? 'active' : ''}`}
        onClick={() => navigationContext.navigate('/personal')}
      >
        个人 ({stats.personalTodos})
      </button>
      <button 
        className={`demo3-nav-item ${currentPage === 'shopping' ? 'active' : ''}`}
        onClick={() => navigationContext.navigate('/shopping')}
      >
        购物 ({stats.shoppingTodos})
      </button>
    </nav>
  );
}

export default Navbar; 